<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img {
                width: 100px;
                height: 100px;
            }

            .div {
                padding: 20px;
                margin-bottom: 10px;
                background-color: #666666;
                border: 1px solid red;
            }

            .abs {
                position: absolute;
            }

            .rea {
                position: relative;
            }

            .line-block {
                display: inline-block;
            }

            .left70 {
                left: 70px;
            }

            .left90 {
                left: 90px;
            }

            .left230 {
                left: 230px;
            }

            .float {
                float: right;
            }

            .top0 {
                top: 0;
            }
        </style>
    </head>
    <body>
        <h2>relative</h2>
        <div>
            <span>相对定位会在流中死死占据位置：</span>
            <div class="div rea line-block left70">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>相对定位,display:line-block</p>
            </div>
            <div class="div line-block">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>普通定位；普通定位；</p>
            </div>
            <span>但是显示到了半空；但是显示到了仙界；</span>
        </div>
        <div>
            <span>相对定位会在流中死死占据位置：</span>
            <div class="div rea line-block left70">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>相对定位,display:line-block</p>
            </div>
            <div class="div rea line-block">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>相对定位,display:line-block</p>
            </div>
            <span>但是显示到了半空；但是显示到了仙界；</span>
        </div>
        <hr/>
        <h2>float</h2>
        <div style="background-color: #F4A460;">
            <div class="div line-block float">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>浮动,float: right;</p>
            </div>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
        </div>
        <div style="height: 20px;background-color: #F4A460;border: 2px solid black; margin-top:10px;">this is a div（block）, 宽度不受float影响</div>
        <h2>overflow:hidden（在我的地盘，绝对不允许出现float，外来的float我想办法躲（见上下影响），里面的我扯下来）</h2>
        <div style="background-color: #F4A460;overflow: hidden;border: 2px solid black;" title="设置了overflow:hidden可以防止父元素坍塌">
            <div class="div line-block float">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>浮动,float: right;</p>
            </div>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
            <span>我认为float还是在流当中，但是会导致父元素坍塌；；；；；</span>
        </div>
        <h2>float父元素坍塌：不占据高度，但是占据宽度(这个宽度只影响 inline / inline-block / 文字（如后面的h标签）)</h2>
        <div style="background-color: #F4A460;border: 10px solid red;" class="inline-block rea" >
            <div class="div" style="float:left;">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>浮动,float: left;</p>
            </div>
            <p>div, display:inline-block; this is p</p>
            <div style="height:20px;background-color:rgb(17, 85, 85);border: 5px solid yellow;">this is block</div>
            <div style="height:20px;background-color:rgb(17, 85, 85);border: 5px solid yellow;display:inline-block;margin-top:10px;">this is inline-block</div>
            <div style="height:20px;background-color:rgb(17, 85, 85);border: 5px solid yellow;margin-top:10px;">this is block</div>
        </div>
        <h2 style="background-color:#F4A460;">float只是在半空，没到仙界，比absolute低???????? 这里存疑, 关于设置float元素opacity小于1的时候, 设置透明度会导致元素飞到仙界</h2>
        <button id="ck_f_op">改变float的opacity等于或者小于1</button>理解为 “仙力不足”：设置透明度会隐式的创建一个层叠上下文。
        <div style="background-color: #F4A460;border: 10px solid red;" class="inline-block rea" >
            
                <div class="div abs" style="left:110px;">
                        <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                        <p>absolute left:110px;"兄"</p>
                    </div>

            <div class="div" id="ck_f_op_t" style="float:left;opacity:0.9;">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>浮动,float: left;“弟”</p>
            </div>
            <div class="div abs" style="top:180px;">
                    <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                    <p>absolute left:110px;"弟"</p>
                </div>
            <p>div, display:inline-block; this is p</p>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <hr/>
        <h2>absolute</h2>
        <div class="div">
            <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
            <p>无absolute</p>
        </div>
        <div class="div abs">
            <img title="absolute后（默认显示在流的下一个位置，未设置top、left等），具有包裹性" src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
            <p title="这里是仙界">这里是仙界</p>
        </div>
        <p>这里是凡间；这里是凡间；这里是凡间；这里是凡间；这里是凡间；</p>
        <p>这里是凡间；这里是凡间；这里是凡间；这里是凡间；这里是凡间；</p>
        <p>这里是凡间；这里是凡间；这里是凡间；这里是凡间；这里是凡间；</p>
        <div class="div abs left70">
            <img title="left等属性是相对于非static布局（即默认布局）" src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
            <p title="具有包裹性；设置left；不存在于凡间，但是显示默认在流中，但是流中没有其位置">absolute后（y方向默认位置）</p>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <hr/>
        <h2>absolute VS relative： 至少都显示在了仙界，后者真身在凡间</h2>
        <div class="rea">
            <div class="div rea line-block left70">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>相对定位,display:line-block</p>
            </div>
            <div class="div abs left230 top0">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p title="absolute后（设置了top和left）">absolute后（设置了top和left）</p>
            </div>
        </div>
        <hr/>
        <div class="rea">
            <div class="div abs left70 top0">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p title="absolute后（设置了top和left）">absolute后（设置了top和left）</p>
            </div>
            <div class="div rea line-block left230">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>相对定位,display:line-block</p>
            </div>
        </div>
        <hr/>
        <div>
            <div class="div rea line-block left70">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>相对定位,display:line-block</p>
            </div>
            <div class="div abs left230">
                <img src="http://scimg.jb51.net/allimg/130523/2-1305231414312R.jpg"/>
                <p>absolute后（y方向默认位置）</p>
            </div>
        </div>
        <script>
            document.querySelector('#ck_f_op').onclick = function(event){
                let style = document.querySelector("#ck_f_op_t").style; 
                //console.log(style.opacity);
                if(style.opacity!=='1')style.opacity=1;
                else style.opacity = 0.9;
            };
        </script>
    </body>
</html>
